<script setup lang="ts">
import type { EvaluateDoc } from '@/types/room'
import { error } from '@/utils/tools';
import { ref, computed, inject, type Ref } from 'vue'
import { evaluateDocApi } from '@/services/consult'
import type { ConsultOrderItem } from '@/types/consult'
defineProps<{
  evaluateDoc?: EvaluateDoc
}>()
// 评价
// 1.有评价，显示评价分数
// 2.没评价显示评价表单收集评价信息
// 3.调评价的api接口实现评价
// 4.评价完成后，要更改msgType的值为已评价
const score = ref(0)
const content = ref('')
const anonymousFlag = ref(false)
// 获取订单详情
const consult = inject<Ref<ConsultOrderItem>>('consult')
// 给函数加类型
type Fn = (score: number) => void
const completeEva = inject<Fn>('completeEva')
// 控制button按钮的样式
const disabled = computed(() => !(score.value && content.value))
// 提交评价
const submitEvaluate = async () => {
  if (score.value === 0) return error('请先评分')
  if (content.value.trim().length === 0) return error('请添加评价内容')
  await evaluateDocApi({
    docId: consult?.value.docInfo?.id || '',
    orderId: consult?.value.id || '',
    score: score.value,
    content: content.value,
    anonymousFlag: anonymousFlag.value ? 1 : 0
  })
  // 修改msgType的值为已评价
  completeEva && completeEva(score.value)
}

</script>

<template>
  <!-- 已评价:显示评价的分数 -->
  <div class="evalutate-card" v-if="evaluateDoc">
    <p class="title">医生服务评价</p>
    <p class="desc">我们会更加努力提升服务质量</p>
    <van-rate :modelValue="evaluateDoc.score" size="7vw" gutter="3vw" color="#FADB14" void-icon="star"
      void-color="rgba(0,0,0,0.04)" />
  </div>
  <!-- 未评价：显示收集评价信息的表单 -->
  <div class="evalutate-card" v-else>
    <p class="title">感谢您的评价</p>
    <p class="desc">本次在线问诊服务您还满意吗？</p>
    <van-rate size="7vw" gutter="3vw" color="#FADB14" void-icon="star" void-color="rgba(0,0,0,0.04)" v-model="score" />
    <van-field v-model="content" type="textarea" maxlength="150" show-word-limit rows="3"
      placeholder="请描述您对医生的评价或是在医生看诊过程中遇到的问题"></van-field>
    <div class="footer">
      <van-checkbox v-model="anonymousFlag">匿名评价</van-checkbox>
      <van-button @click="submitEvaluate" :class="{ disabled: disabled }" type="primary" size="small" round>
        提交评价
      </van-button>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.evalutate-card {
  width: 100%;
  background-color: #fff;
  border-radius: 8px;
  overflow: hidden;
  text-align: center;
  padding: 15px;

  .title {
    font-size: 15px;
    margin-bottom: 5px;
  }

  .desc {
    font-size: 12px;
    margin-bottom: 15px;
    color: var(--cp-tip);
  }

  .van-field {
    background-color: var(--cp-bg);
    margin: 15px 0;
    border-radius: 8px;
  }

  .footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;

    ::v-deep() {
      .van-checkbox {
        .van-icon {
          font-size: 12px;
        }

        &__label {
          font-size: 12px;
          color: var(--cp-tip);
        }

        &__icon {
          height: 0.8em;
        }

        height: 16px;
      }

      .van-button {
        padding: 0 16px;

        &.disabled {
          opacity: 1;
          background: #fafafa !important;
          color: #d9dbde !important;
          border: #fafafa !important;
        }
      }
    }
  }
}
</style>
